<script lang="ts" setup>
import lodash from 'lodash'
import moment from 'moment'
import * as d3 from 'd3'
import { OrderApi } from '~/api/OrderApi'
import SalesPie from '~/components/trends/SalesPie.vue'
import { OrderModel } from '~/model'

const route = useRoute()
const router = useRouter()
const day = ref(new Date())
const pickingDate = ref(false)

// const orders = ref([] as OrderModel[])
// const ordersOfDay = computed(() => {
//   const sD = moment(day.value).format('YYYYMMDD')
//   return orders.value.filter((order) => {
//     return moment(order.date).format('YYYYMMDD') === sD
//   })
// })
const ordersOfDay = ref([] as OrderModel[])

interface NameQuantityAmount {
  name: string
  quantity: number
  amount: number
}

const consumerSummaryOfDay = computed(() => {
  // const orderItems = lodash.flatten(ordersOfDay.value.map(x => x.items))
  const groupedByConsumer = lodash.groupBy(ordersOfDay.value, x => x.consumer!.name)
  const res: NameQuantityAmount[] = []
  for (const name of Object.keys(groupedByConsumer)) {
    res.push({
      name,
      quantity: groupedByConsumer[name].length,
      amount: groupedByConsumer[name].map(x => x.totalAmount()).reduce((y, x) => y + x, 0),
    })
  }
  res.sort((a, b) => b.amount - a.amount)

  return res
})

const taOfDay = computed(() => {
  return consumerSummaryOfDay.value.map(x => x.amount).reduce((y, x) => y + x, 0)
})

onMounted(() => {
  const a = route.query.date as string | undefined
  if (a) {
    day.value = new Date(a)
  }

  OrderApi.getToday()
    .then((res) => {
      ordersOfDay.value = res
    })
})

watch(day, () => pickingDate.value = false)

function color2(param: string) {
  const domain = consumerSummaryOfDay.value.map(x => x.name)
  return d3.scaleOrdinal()
    .domain(domain)
    .range(
      d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1),
        domain.length,
      ).reverse())(param)
}

const greetings = computed(() => {
  const d = new Date()
  const h = d.getHours()
  const time = moment(d.valueOf()).format('HH:mm')
  let s = '时间'
  if (h >= 6 && h < 9) {
    s = '早晨'
  }
  else if (h >= 9 && h < 12) {
    s = '上午'
  }
  else if (h >= 12 && h < 14) {
    s = '中午'
  }
  else if (h >= 14 && h < 17) {
    s = '下午'
  }
  else if (h >= 17 && h < 20) {
    s = '傍晚'
  }
  else if (h >= 20) {
    s = '晚上'
  }
  else if (h < 5) {
    s = '凌晨了, 注意休息'
  }
  return `${s} ${time}`
})

function goDay() {
  router.push('trends/day')
}

function goIndex() {
  router.push('trends')
}
</script>

<template>
  <div v-if="ordersOfDay.length" paper m2 flex p0 @click="goDay">
    <SalesPie m4 flex-cc flex-1 :data="consumerSummaryOfDay.map(x => ({ name: x.name, value: x.amount }))" />
    <div flex flex-1 flex-col justify-center>
      <!-- <div>
        {{ greetings }}
      </div> -->
      <div text-size="4.5" font-bold>
        今日销售额
      </div>
      <div v-for="(item, index) in consumerSummaryOfDay.slice(0, 3)" :key="index" flex items-center>
        <div mr2 h-3 w-3 :style="{ backgroundColor: color2(item.name) }" />
        <div mr2>
          {{ item.name }}
        </div>
        <div>{{ item.amount }}</div>
      </div>
    </div>
  </div>
  <div v-else paper min-h-30vh flex-cc c-gray @click="goIndex">
    今日暂无订单
  </div>
</template>

<style scoped>

</style>

<route lang="yaml">
meta:
  title: 统计
</route>
